<template>
	<!-- <view> -->
	<!-- <qiun-title-bar title="基本曲线图(自定义图表类型)"/> -->
	<!-- v-if="ischartshow" -->
	<view class="charts-box">
		<!-- 这里的type="demotype"演示了自定义图表类型的demo，您可以根据需求自己定义一种额外的图表类型 -->
		<qiun-data-charts type="line" :chartData="chartsDataLine2" :ontouch='true'
			:opts="{yAxis:zhyaxios,xAxis:zhxAxis, enableScroll: true}" />
		<!-- 如果不定义"demotype"这个图表类型，可以通过传递opts来覆盖line下的默认配置，如下 -->
		<!-- <qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}" :chartData="chartsData.Line2"/> -->
	</view>
	<!-- <view class="charts-box" v-else>
			<view class="zh-tip">请稍等约需{{havetime}}秒完成加载</view>
		</view> -->
	<!-- </view> -->
</template>

<script>
	import reqAPI from '@/plugins/request.js';
	import agriculturalApi from '@/api/socialized-servce/agricultural-information/index.js'
	// import {debounce} from '@/plugins/util.js'
	// itemCount限制单屏x轴数量
	export default {
		name: "ucharttu",
		data() {
			return {
				ischartshow: true,
				havetime: 2.5,
				zhnewdatalist: [],
				// 侧边y轴
				zhyaxios: {
					"splitNumber": 5,
					"showTitle": true,
					data: [{
							position: 'left',
							min: 0,
							title: '折线',
							axisLineColor: '#32cc97'
						}
						// {position: 'right',min: 0,title: '柱状图',textAlign: 'left',axisLineColor:'#1890FF'},
						// {position: 'right',min: 0,title: '柱状图',textAlign: 'left',axisLineColor:'#FAC858'}
						// {position: 'right',min: 0,max: 200,title: '点',textAlign: 'left'},
					]
				},
				zhxAxis: {
					disableGrid: false,
					itemCount: 4,
					// backgroundColor: 'none'
					// "splitNumber": 5,
					// "showTitle": true
				},
				nyu: [],
				nameList: [],
				mydatelist: [],
				serverData: [],
				// tuname:'',
				chartsDataLine2: {
					"categories": [],
					"series": []
				},
				"Mix": {
					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
					"series": [{
						"name": "折线",
						"data": [21120, 22140, 21105, 21170, 2195, 1160],
						"type": "line",
						"color": "#55ffff"
					}, {
						"index": 0,
						"name": "曲面",
						"data": [70, 50, 85, 130, 64, 88],
						"type": "area",
						"style": "curve"
					}, {
						"name": "柱1",
						"index": 1,
						"data": [40, {
							"value": 30,
							"color": "#f04864"
						}, 55, 110, 24, 58],
						"type": "column"
					}, {
						"name": "柱2",
						"index": 1,
						"data": [50, 20, 75, 60, 34, 38],
						"type": "column"
					}, {
						"index": 1,
						"name": "曲线",
						"data": [70, 50, 85, 130, 64, 88],
						"type": "line",
						"style": "curve",
						"color": "#32cc97",
						"disableLegend": true
					}, {
						"name": "点",
						"index": 2,
						"data": [70, 50, 85, 130, 64, 88],
						"type": "point",
						"color": "#f04864"
					}]
				},
				"Line": {
					"categories": ["2016", "2017", "2018", "2019", "2020", "2021", "2019", "2020", "2021"],
					"series": [{
						"name": "成交量A",
						"data": [35, 8, 25, 37, 4, 20, 37, 4, 20]
					}, {
						"name": "成交量B",
						"data": [70, 40, 65, 100, 44, 68, 37, 4, 20]
					}, {
						"name": "成交量C",
						"data": [100, 80, 95, 150, 112, 132, 37, 4, 20]
					}]
				},
				tydata: {}
			};
		},
		// props:{
		// 	tydata:{
		// 		type:Object
		// 	}
		// 	},
		// watch:{
		// 	tydata(newvalue){
		// 		this.tydata = newvalue
		// 		this.geteneverdata()
		// 	}
		// },
		mounted() {
			//模拟从服务器获取数据
			// this.getServerData()
			// this.geteneverdata()
		},
		methods: {
			// 调用方法并赋值
			setchartmes(e) {
				this.tydata = e
				this.geteneverdata()
			},
			// 循环调用获取环境数据方法
			geteneverdata() {
				// this.ischartshow = false
				let listone = this.tydata
				this.mydatelist = []
				if (listone.dataItemIdList) {
					this.chartsDataLine2 = {
						"categories": [],
						"series": []
					}
					let maxindex = listone.dataItemIdList.length - 1
					this.havetime = 2.5 * (maxindex + 1)
					for (let zzindex = 0; zzindex < listone.dataItemIdList.length; zzindex++) {
						let zzitem = listone.dataItemIdList[zzindex]
						let par = {
							'dataItemId': Number(zzitem),
							'startTime': listone.startDatetime,
							'endTime': listone.endDatetime
						}


						// 循环调用方法
						// setTimeout(function() {

						// }, 2000);
						let that = this
						let time = (zzindex) * 2500
						// if(zzindex>0 && zzindex <3){
						// clearTimeout(mettime)
						let mettime = setTimeout(
							async () => {
								// debounce(that.handdata(par,zzindex),time) 
								await that.handdata(par, zzindex, maxindex)
								// if(maxindex === zzindex){
								// 	this.ischartshow = true
								// }
							}, time, zzindex
						)

						// }

						if (maxindex === zzindex) {
							// y轴初始化
							// this.nyu= []
							// if(maxindex === 0){
							// 	this.zhyaxios = {
							// 		"showTitle": true,
							// 		data:[
							// 			{position: 'left',min: 0,title:this.tydata.unitNameList[0],axisLineColor:'#32cc97',fontColor:'#32cc97',titleFontColor:'#32cc97'}
							// 		]
							// 	}
							// }
							// if(maxindex === 1){
							// 	this.zhyaxios = {
							// 		"showTitle": true,
							// 		data:[
							// 			{position: 'left',min: 0,title: this.tydata.unitNameList[0],axisLineColor:'#32cc97',fontColor:'#32cc97',titleFontColor:'#32cc97'},
							// 			{position: 'right',min: 0,title: this.tydata.unitNameList[1],textAlign: 'left',axisLineColor:'#91CB74',fontColor:'#91CB74',titleFontColor:'#91CB74'}
							// 		]
							// 	}
							// }
							// if(maxindex>=2){
							// 	this.zhyaxios = {
							// 		"showTitle": true,
							// 		data:[
							// 			{position: 'left',min: 0,title: this.tydata.unitNameList[0],axisLineColor:'#32cc97',fontColor:'#32cc97',titleFontColor:'#32cc97'},
							// 			{position: 'right',min: 0,title: this.tydata.unitNameList[1],textAlign: 'left',axisLineColor:'#91CB74',fontColor:'#91CB74',titleFontColor:'#91CB74',titleOffsetX:-15},
							// 			{position: 'right',min: 0,title: this.tydata.unitNameList[2],textAlign: 'left',axisLineColor:'#FAC858',fontColor:'#FAC858',titleFontColor:'#FAC858',titleOffsetX:10}
							// 		]
							// 	}
							// }
							// this.ischartshow = true
						}
						// this.handdata(par,zzindex)
					}
					// listone.dataItemIdList.forEach(
					// 	async (zzitem,zzindex) => {
					// let par = {
					// 	'dataItemId':Number(zzitem),
					// 	'startTime':listone.startDatetime,
					// 	'endTime':listone.endDatetime
					// }

					// y轴初始化
					// this.nyu= []
					// 循环调用方法
					// setTimeout(function() {
					// await this.handdata(par,zzindex)
					// }, 2000);
					// let that = this
					// if(zzindex>0 && zzindex <3){
					// 	setTimeout(
					// 		function(){
					// 			that.handdata(par,zzindex)
					// 		},2000
					// 	)
					// }
					// let maxindex = listone.dataItemIdList.length -1
					// if(maxindex === zzindex){
					// 	if(maxindex === 0){
					// 		this.zhyaxios = {
					// 			"showTitle": true,
					// 			data:[
					// 				{position: 'left',min: 0,title:this.tydata.unitNameList[0],axisLineColor:'#32cc97',fontColor:'#32cc97',titleFontColor:'#32cc97'}
					// 			]
					// 		}
					// 	}
					// 	if(maxindex === 1){
					// 		this.zhyaxios = {
					// 			"showTitle": true,
					// 			data:[
					// 				{position: 'left',min: 0,title: this.tydata.unitNameList[0],axisLineColor:'#32cc97',fontColor:'#32cc97',titleFontColor:'#32cc97'},
					// 				{position: 'right',min: 0,title: this.tydata.unitNameList[1],textAlign: 'left',axisLineColor:'#91CB74',fontColor:'#91CB74',titleFontColor:'#91CB74'}
					// 			]
					// 		}
					// 	}
					// 	if(maxindex>=2){
					// 		this.zhyaxios = {
					// 			"showTitle": true,
					// 			data:[
					// 				{position: 'left',min: 0,title: this.tydata.unitNameList[0],axisLineColor:'#32cc97',fontColor:'#32cc97',titleFontColor:'#32cc97'},
					// 				{position: 'right',min: 0,title: this.tydata.unitNameList[1],textAlign: 'left',axisLineColor:'#91CB74',fontColor:'#91CB74',titleFontColor:'#91CB74',titleOffsetX:-15},
					// 				{position: 'right',min: 0,title: this.tydata.unitNameList[2],textAlign: 'left',axisLineColor:'#FAC858',fontColor:'#FAC858',titleFontColor:'#FAC858',titleOffsetX:10}
					// 			]
					// 		}
					// 	}
					// 	this.ischartshow = true
					// }
					// 	}
					// )
					// 多条y轴判断
					// let nowindex = listone.dataItemIdList.length - 1 || 0
					// if(nowindex === 0){
					// 	this.zhyaxios = {
					// 		"showTitle": true,
					// 		data:[
					// 			{position: 'left',min: 0,title:this.tydata.unitNameList[0],axisLineColor:'#32cc97',fontColor:'#32cc97',titleFontColor:'#32cc97'}
					// 		]
					// 	}
					// }
					// if(nowindex === 1){
					// 	this.zhyaxios = {
					// 		"showTitle": true,
					// 		data:[
					// 			{position: 'left',min: 0,title: this.tydata.unitNameList[0],axisLineColor:'#32cc97',fontColor:'#32cc97',titleFontColor:'#32cc97'},
					// 			{position: 'right',min: 0,title: this.tydata.unitNameList[1],textAlign: 'left',axisLineColor:'#91CB74',fontColor:'#91CB74',titleFontColor:'#91CB74'}
					// 		]
					// 	}
					// }
					// if(nowindex>=2){
					// 	this.zhyaxios = {
					// 		"showTitle": true,
					// 		data:[
					// 			{position: 'left',min: 0,title: this.tydata.unitNameList[0],axisLineColor:'#32cc97',fontColor:'#32cc97',titleFontColor:'#32cc97'},
					// 			{position: 'right',min: 0,title: this.tydata.unitNameList[1],textAlign: 'left',axisLineColor:'#91CB74',fontColor:'#91CB74',titleFontColor:'#91CB74',titleOffsetX:-15},
					// 			{position: 'right',min: 0,title: this.tydata.unitNameList[2],textAlign: 'left',axisLineColor:'#FAC858',fontColor:'#FAC858',titleFontColor:'#FAC858',titleOffsetX:10}
					// 		]
					// 	}
					// }

					// this.ischartshow = true
				}
			},
			formatTime(e) {
				var a = new Date(e);
				var m = a.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				var d = a.getDate();
				d = d < 10 ? "0" + d : d;
			
				var h = a.getHours();
				h = h < 10 ? "0" + h : h;
				var mm = a.getMinutes();
				mm = mm < 10 ? "0" + mm : mm;
				// var s = a.getSeconds();
				// s = s < 10 ? "0" + s : s;
			
				return m + '-' + d + '  ' + h + ':' + mm;
			},
			// 获取环境数据-并进行处理
			handdata(e, nowindex, maxindex) {
				if (nowindex > 2) {
					return
				}
				// console.log(nowindex)
				agriculturalApi.queryHistory(e).then(res => {
				// reqAPI.requst('v3/iot/dataItem/queryHistory', e, 'post').then(res => {
					let list = res.data
					// x轴数值初始化
					this.nameList = []
					// 单个y轴数据初始化
					let ylist = []
					let xlist = []
					var i = 0
					let len = list.length
					for (i; i < list.length; i += 20) {
						// x轴赋值.substring(5,16)
						xlist.push(this.formatTime(list[i].collectDatetime))
						// xlist.push(list[i].collectDatetime.substring(5, 16))
						ylist.push(list[i].value)
					}
					this.nameList = xlist

					// 当前数据对应的y轴index
					let ydataindex = nowindex

					// 单个类型名称 ---
					let ytypename = this.tydata.dataItemNameList[nowindex]
					// 单条折线图数据
					let seriesdataitem = {
						'data': ylist,
						'name': ytypename,
						'index': nowindex
					}
					this.$set(this.zhnewdatalist, nowindex, seriesdataitem)
					console.log(this.tydata.dataItemNameList)
					if (this.zhnewdatalist.length === this.tydata.dataItemNameList.length) {
						// console.log("最后赋值")

						this.nyu = []
						if (maxindex === 0) {
							this.zhyaxios = {
								"showTitle": true,
								// "splitNumber": 100,
								data: [{
									position: 'left',
									min: 0,
									title: this.tydata.unitNameList[0] || '',
									axisLineColor: '#32cc97',
									fontColor: '#32cc97',
									titleFontColor: '#32cc97'
								}]
							}
						}
						if (maxindex === 1) {
							this.zhyaxios = {
								"showTitle": true,
								// "splitNumber": 100,
								data: [{
										position: 'left',
										min: 0,
										title: this.tydata.unitNameList[0] || '',
										axisLineColor: '#32cc97',
										fontColor: '#32cc97',
										titleFontColor: '#32cc97'
									},
									{
										position: 'right',
										// min: 0,
										title: this.tydata.unitNameList[1] || '',
										textAlign: 'left',
										axisLineColor: '#91CB74',
										fontColor: '#91CB74',
										titleFontColor: '#91CB74'
									}
								]
							}
						}
						if (maxindex >= 2) {
							this.zhyaxios = {
								"showTitle": true,
								// "splitNumber": 100,
								data: [{
										position: 'left',
										min: 0,
										title: this.tydata.unitNameList[0] || '',
										axisLineColor: '#32cc97',
										fontColor: '#32cc97',
										titleFontColor: '#32cc97'
									},
									{
										position: 'right',
										// min: 0,
										title: this.tydata.unitNameList[1] || '',
										textAlign: 'left',
										// axisLineColor: '#91CB74',
										// fontColor: '#91CB74',
										// titleFontColor: '#91CB74',
										titleOffsetX: -15
									},
									{
										position: 'right',
										// min: 0,
										title: this.tydata.unitNameList[2] || '',
										textAlign: 'left',
										axisLineColor: '#FAC858',
										fontColor: '#FAC858',
										titleFontColor: '#FAC858',
										titleOffsetX: 10
									}
								]
							}
						}
						this.chartsDataLine2.categories = this.nameList
						this.chartsDataLine2.series = this.zhnewdatalist
						this.zhnewdatalist = []
					}
					// this.$set(this.chartsDataLine2.series,nowindex,seriesdataitem)
					// this.chartsDataLine2.series.push(seriesdataitem)
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 500rpx;
		margin-left: -30rpx;

		.zh-tip {
			// margin: 0;
			padding-top: 240rpx;
			width: 650rpx;
			height: 70rpx;
			white-space: nowrap;
			line-height: 70rpx;
			font-size: 32rpx;
			color: #3aca99;
			text-align: center;
		}
	}
</style>
